<template>
  <div class="appPage">
    <h3 class="tit">日报表</h3>
    <div class="search">
      <div class="left">
        <span>企业名称</span>
        <el-input
          v-model="form.name"
          placeholder="请输入企业名称"
          class="handle-input mr10"
        ></el-input>
        
        <!-- 日期选择，dayjs -->
        <span>日期</span>
        <el-date-picker
          v-model="form.day"
          type="date"
          placeholder="选择日期"
          @change="getDate"
          :clearable="false"
          format="YYYY-MM-DD">
        </el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="handleSearch(scope)" class="searchBtn">查找</el-button>
      </div>
      <div class="right">
         <el-button class="reset" type="primary" icon="el-icon-refresh" @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="container">
      <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
      >
<!--        <el-table-column type="selection" width="55" align="center"></el-table-column>-->
        <el-table-column prop="day" label="填表日期" align="center"></el-table-column>
        
        <el-table-column prop="uuid" label="企业编号" align="center"></el-table-column>
        <el-table-column prop="name" label="企业名称" align="center"></el-table-column>
        <!-- <el-table-column prop="minute" label="计费分钟数" align="center"></el-table-column> -->
        <el-table-column prop="seconds" label="计费秒数" align="center"></el-table-column>
        <el-table-column prop="money" label="总成本" align="center"></el-table-column>
        <el-table-column prop="sumCount" label="呼叫总次数" align="center"></el-table-column>
        <el-table-column prop="count" label="呼叫成功次数" align="center"></el-table-column>       
        <el-table-column prop="usercount" label="呼叫总用户" align="center"></el-table-column>
        <el-table-column prop="avg" label="acd平均通话时长（秒数）" align="center"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="ageIndex"
            :page-size="pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import dayjs from 'dayjs'//日期选择
export default {
  name: "dailyReport",
  data() {
    return {
      form:{
        day: null,
        appid: "",
        name: null,
        // minute: "",
        seconds: "",
        money: "",
        sumCount:"",
        count: "",
        usercount: "",
        avg:"",
      },
      
      // pickerOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now();
      //   }
      // },
      pageIndex: 1,//当前在第几页
      pageSize: 10,//前端规定每页显示数量
      tableData: [],//用于接收后端数据表的数组
      pageTotal: 0,//总共有多少数据
      page:10,//接口请求的页数
      size:1,//接口请求的每页的数量
    };
  },
  // watch: {
  //   day() {
  //     if (this.from.day == "") {
  //       this.from.day = null;
  //     }
  //   },
  //   name() {
  //     if (this.from.name == "") {
  //       this.from.name = null;
  //     }
  //   },
  // },
  created(){
    this.getList()
  },
  //切换界面就执行方法
  activated(){
    this.getList()
  },
  methods: {
    getDate(date){
      this.form.day = dayjs(date).format('YYYY-MM-DD')
    },
    // 分页导航
    handlePageChange(val) {
      this.page = val;
      this.getList();
    },
    //展示and查询
    getList() {
      let params = {
        page: this.page,
        size: this.size, 
        day:this.form.day,
        name:this.form.name,
      };
      // this.set();
      axios
      .post("http://118.190.2.70:9999/vo/table/daytableAll", params)
      // .post("http://118.190.2.70:9999/vo/table/daytableAll", params)
      .then(res => {
         if(res.data.success == false){
                this.$router.push('/403')
          }else{
               this.tableData = res.data.data
                this.pageTotal = res.data.total
          }
      })
      .catch(err => {
        console.log(err);
      })
    },

    handleSearch() {
      this.getList();
    },
    //刷新按钮
    reset() {
      this.form.day = null;
      this.form.name = null;
      this.getList();
    },
  }
};
</script>

<style scoped>

.tit{
  font-weight: normal;
  font-size: 36px;
  color: #333333;
}
.search{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.left{
  display: flex;
  align-items: center;
}
.left span{
  width: 180px;
  text-align:center
}
.left block{
  display: flex;
  align-items: center;

}
.searchBtn{
  margin-left: 30px;
}
.right{
  display: flex;
  justify-content: flex-end;
}
.reset{
  width: 80px;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.add{
  margin-left: 15px;
}
.container{
  margin-top: 20px;
}
div/deep/.el-input__inner{
  width: 200px;
}
div/deep/.el-input{
  width: 40%;
}

</style>
